<template>
	<view class="my">
		<u-navbar fixed safeAreaInsetTop placeholder bgColor="#E60012">
			<view class="custom-nav" slot="left">我的</view>
		</u-navbar>
		<view class="my-content">
			<view class="my-head" @click="headClick">
				<image
					:src="userinfo.avatar || '/static/default_avatar.png'"
					class="my-head-avatar"
					mode="aspectFill"
				></image>
				<text class="my-head-txt">{{ userinfo.nickName || userinfo.trueName || '跑友' }}</text>
			</view>

			<view class="menus">
				<u-grid :border="false" col="4">
					<u-grid-item @click="$utils.navigateTo(true, '/pagesA/my/order/list')">
						<image src="/static/my_order.png" class="menus-icon"></image>
						<text class="menus-text">我的订单</text>
					</u-grid-item>
					<u-grid-item @click="$utils.navigateTo(true, '/pagesA/my/zhongqian/index')">
						<image src="/static/my_result.png" class="menus-icon"></image>
						<text class="menus-text">中签结果</text>
					</u-grid-item>
					<u-grid-item @click="$utils.navigateTo(true, '/pagesA/my/grade/index')">
						<image src="/static/my_score.png" class="menus-icon"></image>
						<text class="menus-text">成绩查询</text>
					</u-grid-item>
					<u-grid-item @click="$utils.navigateTo(true, '/pagesA/my/zhiyuan/index')">
						<image src="/static/my_msg.png" class="menus-icon"></image>
						<text class="menus-text">志愿者</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="contact" v-if="telphone">联系客服：{{ telphone }}</view>
		</view>
		<view class="logout-btn" @click="logout" v-if="userinfo.token">
			<u-button text="退出登录" color=" #e60012" plain></u-button>
		</view>
	</view>
</template>

<script>
const app = getApp()
import { loginHandle, getUserInfo } from '@/utils/mpWx.js'
export default {
	data() {
		return {
			userinfo: {},
			telphone: ''
		}
	},
	onLoad() {
		this.getConfig()
	},
	async onShow() {
		try {
			if (uni.getStorageSync('token')) {
				uni.showLoading({ title: '数据加载中' })
				const res = await getUserInfo()
				console.log(res)
				this.userinfo = res
				app.globalData.userInfo = res
				uni.setStorageSync('userinfo', res || {})
				uni.hideLoading()
			}
		} catch (err) {
			console.log(err)
			uni.hideLoading()
		}
	},
	methods: {
		getConfig() {
			/* prettier-ignore */
			this.$https(false, 'get', {
				url: '/race/other/cstel'
			}, (res) => {
				this.telphone = res.data
			})
			/* prettier-ignore */
		},
		// 用户详情
		headClick() {
			this.$utils.navigateTo(true, '/pages/my/baseinfo')
		},
		onCallPhone() {
			uni.makePhoneCall({
				phoneNumber: '',
				success() {},
				fail() {}
			})
		},
		onMyRace() {
			uni.$u.toast('敬请期待~')
		},
		logout() {
			uni.clearStorage()
			this.userinfo = {}
			app.globalData.userInfo = {}
			uni.showToast({
				title: '已退出登录！'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/wxLogin'
				})
			}, 500)
		}
	}
}
</script>

<style lang="scss">
.my {
	width: 100%;
	position: relative;
	&-head {
		background-color: #e60012;
		border-radius: 0 0 50rpx 50rpx;
		padding: 80rpx 0 120rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		&-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 24rpx;
		}
		&-txt {
			font-size: 30rpx;
			color: #fff;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.menus {
		background-color: #fff;
		width: 658rpx;
		margin: -60rpx auto 0;
		padding: 50rpx 20rpx 40rpx;
		border-radius: 12rpx;
		&-icon {
			display: block;
			width: 68rpx;
			height: 68rpx;
		}
		&-text {
			display: block;
			margin-top: 20rpx;
		}
	}
}
.custom-nav {
	font-size: 34rpx;
	color: #fff;
	font-family: '黑体';
}
.logout-btn {
	width: 284rpx;
	margin: 120rpx auto 0;
}
.contact {
	font-size: 28rpx;
	text-align: center;
	margin: 30rpx auto 0;
	color: #999;
}
::v-deep {
	.u-input__content__field-wrapper__field {
		height: 56rpx;
		line-height: 56rpx;
	}
}
</style>
